<script type="text/x-template" id="cc-db-table-selector-el-tpl">
    <el-dialog
            :style="{visibility: isDragging ? 'hidden' : 'unset' }"
            class="cc-db-table-selector"
            title="选择表"
            :visible.sync="visible"
            :modal="false"
            size="full"
            :before-close="handleClose">
        <div class="icon-selector__wrapper">
            <div class="filter-form">
                <el-form :inline="true">
                    <el-form-item>
                        <el-input v-model="filter.keyword" placeholder="数据库表名称、描述"></el-input>
                    </el-form-item>
                </el-form>
                <div class="filter-form__actions">
                    <el-button type="primary" @click="fetchData">查询</el-button>
                    <el-button type="warning" @click="handleResetFilter">重置</el-button>
                </div>
            </div>

            <cc-table-el
                    :data="table.data"
                    :header="table.header"
                    :selected="table.selected"
                    :props="table.props"
                    selection-type="multiple"
                    @row-selection-add="handleTableRowSelectionAdd"
                    @row-selection-remove="handleTableRowSelectionRemove"
                    @row-selection-change="handleTableRowSelectionChange"
                    @all-row-selection-change="handleTableAllRowSelectionChange"
            >
            </cc-table-el>

            <el-pagination
                    @size-change="pagination.rows = $event"
                    @current-change="pagination.page = $event"
                    :current-page="pagination.page"
                    :page-sizes="[10, 20, 30]"
                    :page-size="pagination.rows"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSelectEnd">确 定</el-button>
        </span>
    </el-dialog>

</script>

<script>
    Vue.component('cc-db-table-selector-el', {
        data() {
            return {
                isDragging: false,
                visible: false,
                options: [],
                pagination: {
                    page: 1,
                    rows: 15,
                    total: 0
                },
                filter: {
                    keyword: ''
                },
                table: {
                    data: [],
                    selected: [],
                    header: [
                        {
                            label: '表名称',
                            prop: 'tableName',
                            render: function (h, scope) {
                                return h('div', {
                                    key: scope.row.tableName,
                                    directives: [
                                        {
                                            name: 'shadow-drag',
                                            value: scope.row,
                                            arg: scope.row
                                        }
                                    ],
                                    on: {
                                        'shadow-drag-start': this.handleShadowDragStart,
                                        'shadow-drag-end': this.handleShadowDragEnd
                                    }
                                }, scope.row.tableName)
                            }.bind(this)
                        },
                        {
                            label: "表描述",
                            prop: "comment",
                            'show-overflow-tooltip': true,
                            width: 200
                        },
                        {
                            prop: "createdDate",
                            label: "创建时间",
                            width: 190
                        }
                    ],
                    props: {
                        'tooltip-effect': "dark"
                    }
                },
                selected: [],
                originSelected: []
            }
        },
        props: ['dataSource'],
        watch: {
            'pagination.page': 'fetchData',
            'pagination.rows': 'fetchData',
            'table.data': 'updateTableSelected',
            'visible': 'saveOriginSelected'
        },
        template: '#cc-db-table-selector-el-tpl',
        methods: {
            saveOriginSelected(visible) {
                // 开始选择时，把原始的选择临时记录下来
                if (visible) {
                    this.originSelected = this.selected.slice()
                }
            },
            handleResetFilter() {
                this.filter = {
                    keyword: ''
                }
                this.fetchData()
            },
            handleShadowDragStart() {
                setTimeout(function () {
                    this.isDragging = true
                }.bind(this), 0)
            },
            handleShadowDragEnd() {
                this.isDragging = false
            },
            handleClose() {
                this.selected = this.originSelected.slice()
                this.updateTableSelected()
                this.$emit('select-cancel')
            },
            handleSelectEnd() {
                this.$emit('select-end', this.selected.slice())
            },
            fetchData() {
                const filter = JSON.parse(JSON.stringify(this.filter))
                const pagination = this.pagination
                filter.page = pagination.page
                filter.rows = pagination.rows
                const dataSource = this.dataSource
                filter.url = dataSource.url
                filter.username = dataSource.username
                filter.password = dataSource.password
                this.$service
                        .listTable(filter)
                        .then(function (data) {
                            this.table.data = data.rows
                            this.pagination.total = data.total
                        }.bind(this))
                        .catch(function () {

                        })
            },
            handleTableRowSelectionChange(item, index) {
                this.selected = [{
                    id: item.tableName,
                    label: item.comment,
                    data: item
                }]
                this.table.selected = index
            },
            handleTableRowSelectionAdd(targetItem) {
                this.selected = this.selected.concat({
                    id: targetItem.tableName,
                    label: targetItem.comment,
                    data: targetItem
                })
                this.updateTableSelected()
            },
            handleTableRowSelectionRemove(targetItem) {
                this.selected = this.selected.filter((item) => {
                    return item.id !== targetItem.tableName
                }
            )
                this.updateTableSelected()
            },
            updateTableSelected() {
                const table = this.table
                const newSelectedIndex = this.selected.map(item => item.id
            )
                table.selected = table.data.reduce((result, item, index) => {
                    if(newSelectedIndex.indexOf(item.tableName) > -1
            )
                {
                    result.push(index)
                }
                return result
            },
                []
            )
            },
            handleRemoteSelectClear() {
                this.selected = []
                this.table.selected = []
            },
            handleTableAllRowSelectionChange(value) {
                if (value) {
                    this.table.data.forEach(this.handleTableRowSelectionAdd)
                } else {
                    this.handleRemoteSelectClear()
                }
            }
        },
        created() {
            this.fetchData()
            this.visible = true
        }
    })
</script>
<style>
    .cc-db-table-selector .el-input {
        max-width: unset;
    }

    .cc-db-table-selector .filter-form .el-form-item {
        margin-bottom: 10px
    }

    .cc-db-table-selector .filter-form .filter-form__actions {
        text-align: center;
    }

    .cc-db-table-selector .filter-form {
        margin-bottom: 10px;
    }
</style>